<template>
  <div class="tab">
    <cube-tab-bar v-model="selectedLabelSlots"
                  @click="clickHandler">
      <cube-tab v-for="item in tabs"
                :icon="item.icon"
                :label="item.label"
                :key="item.path"
                :value="item.path">
      </cube-tab>
    </cube-tab-bar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectedLabelSlots: "/",
      tabs: [{
        label: '首页',
        icon: 'cubeic-home',
        path: "/"
      }, {
        label: '视频',
        icon: 'cubeic-like',
        path: "/videolist"
      },
      {
        label: '动态',
        icon: 'cubeic-vip',
        path: "/dynamic"
      },
      {
        label: '我的',
        icon: 'cubeic-person',
        path: "/personal"
      },
      ]
    }

  },
  methods: {
    clickHandler (path) {
      if (path !== this.$route.path) {
        this.$router.push(path)//push表示把path路径传进去
      }

      // console.log(label)
    }
  },
  //   这个方法表示刷新页面依然在当前页面
  created () {
    //   默认路由选择器，比如刷新页面，需要重新进入到当前路由
    this.selectedLabelSlots = this.$route.path

  }
};
</script>

<style lang="scss" scoped>
/* <!--SCSS是⼀种CSS预处理语⾔, scoped 是指这个scss样式 只作⽤于当前组件--> */
.tab {
  position: fixed;
  bottom: 0;
  z-index: 999;
  background-color: #fff;
  width: 100%;
  border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
}
.cube-tab_active {
  color: #00baad;
  text-shadow: 0px 0px 5px #00baad;
}
/deep/.cube-tab i {
  font-size: 26px !important;
}
/deep/.cube-tab div {
  font-size: 12px !important;
}
</style>
